<template>
    <div>
        <el-form :model="form">

            <el-form-item label="名称" prop="sensorName">
                <el-input v-model="form.sensorName" disabled/>
            </el-form-item>

            <el-form-item label="报警开关" prop="warnEnable">
                <el-switch
                    @change="changeWarnEnable"
                    v-model="form.warnEnable"
                    active-color="#13ce66"
                    active-text="开启"
                    inactive-text="关闭"
                >
                </el-switch>
            </el-form-item>

            <div v-if="form.warnEnable" style="padding: 10px 0">

                <el-button @click="addWarnParam" size="small">添加</el-button>

                <el-table :data="tableData"
                          stripe
                          style="width: 400px"
                >
                    <el-table-column prop="startVal" align="center" label="起始值">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.startVal"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="endVal" align="center" label="结束值">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.endVal"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-link :underline="false"
                                     type="danger"
                                     @click="removeWarnParam(scope.row, scope.$index)"
                            >删除
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>

                <el-button @click="saveWarnParam" size="small" type="success">保存</el-button>
            </div>

        </el-form>

    </div>
</template>

<script>

import { getSensor, changeWarnEnable } from '@/api/equipment/sensor'

export default {
    name: 'index',
    props: {
        sensor: {
            type: Object
        }
    },
    data() {
        return {
            timer: null,
            loadingTime: 20,
            loading: false,
            btnText: '读取',
            form: {},
            tableData: []
        }
    },
    created() {
        this.form = this.sensor

        let warnParam = this.form.warnParam

        // console.log('报警参数', warnParam)

        if (warnParam != null && warnParam !== '') {
            this.tableData = JSON.parse(warnParam)
        }
    },
    methods: {

        changeWarnEnable(val) {
            // console.log('新状态的值', val)
            this.form.warnEnable = val
            let text = null
            if (val) {
                text = '已开启'
            } else {
                text = '已关闭'
            }
            changeWarnEnable(this.form).then(response => {
                this.$notify.success(text)
            })
        },

        addWarnParam() {
            let length = this.tableData.length
            if (length >= 5) {
                this.$notify.info('最多添加5个条件')
                return
            }
            let obj = {
                'startVal': '0',
                'endVal': '100'
            }
            this.tableData.push(obj)
        },

        removeWarnParam(row, index) {
            this.tableData.splice(index, 1)
        },

        saveWarnParam() {
            this.form.warnParam = JSON.stringify(this.tableData)
            changeWarnEnable(this.form).then(response => {
                this.$notify.success('保存成功')
            })
        },

        querySensor() {
            getSensor(this.form.sensorId).then(response => {
                console.log('重新获取结果', response.data)
                this.form.sensorValue = response.data.sensorValue
                this.form.sensorStatus = response.data.sensorStatus
            })
        }
    }
}
</script>

<style scoped>

</style>
